<!-- 生活指数组件 -->
<script setup>
// 引入 Vue 响应式相关 API
import { ref, watch, computed } from 'vue';
// 引入城市状态管理 store
import { useCityStore } from '../stores/cityStore';
// 引入天气 API
import { Cityairindex } from '@/api/weatherAPI';
// 引入路由相关 API
import { useRouter } from 'vue-router';

// 获取路由实例
const router = useRouter();
// 获取城市状态管理实例
const cityStore = useCityStore();

// 等级 - 背景色映射，用于根据生活指数等级显示不同背景色
const levelBgColorMap = {
  1: '#5cb85c',  // 绿色，代表适宜等较好状态
  2: '#87d068', // 浅绿色
  3: '#f0ad4e', // 橙色
  4: '#f39c12', // 深橙色
  5: '#d9534f', // 红色
  6: '#c9302c', // 深红色
  7: '#ac2925', // 更深的红色
  8: '#7f1d1d', // 最深的红色
  default: '#fff' // 默认白色
};

// 监听城市状态变化，当城市改变时重新获取数据
watch(
  // 监听的数据源：城市状态中的 location
  () => cityStore.location,
  // 回调函数，当 location 变化时执行
  async (newLocation) => {
    // 若新的 location 存在 id，则调用 getData 函数获取数据
    if (newLocation?.id) {
      await getData(newLocation.id);
    }
  },
  { immediate: true }
);

// 存储生活指数每日数据
const indiceDaily = ref([]);

// 异步函数，用于根据城市 ID 获取生活指数数据
async function getData(locationID) {
  const airindex = await Cityairindex(locationID, 0); 
  indiceDaily.value = airindex.daily || []; 
}

// 点击生活指数项时的处理函数，跳转到对应详情页
function selectItem(item) {
  router.push(`/livingdetail/${item.type}`);
}

// 计算属性，对生活指数数据进行处理，添加背景色信息
const formattedData = computed(() => {
  return indiceDaily.value.map(item => {
    // 获取生活指数等级，若不存在则默认为 0
    const level = item.level ; 
    // 根据等级获取对应的背景色，若不存在则使用默认背景色
    const bgColor = levelBgColorMap[level] ;
    return {
      ...item,
      categoryBg: bgColor
    };
  });
});

// 图标映射，根据生活指数名称显示对应的图标
const iconMap = {
  '运动指数': '🏋️',
  '洗车指数': '🚗',
  '紫外线指数': '☀️',
  '感冒指数': '🤧',
  '穿衣指数': '👕',
  '晾晒指数': '👚',
  '旅游指数': '🌄',
  '钓鱼指数': '🎣',
  '交通指数': '🚦',
  '舒适度指数': '😌',
  '空气污染扩散条件指数': '🌫️',
  '空调开启指数': '🧊',
  '过敏指数': '🤒',
  '太阳镜指数': '🕶️',
  '化妆指数': '💄',
  '美发指数': '💇',
  '防晒指数': '🌞',  // 太阳图标

  default: '📌'
};

// 根据生活指数名称获取对应的图标
const getIcon = (name) => {
  return iconMap[name] || iconMap.default;
};
</script>

<template>
  <!-- 生活指数容器 -->
  <div class="indice">
    <!-- 标题 -->
    <h1>生活指数</h1> 
    <!-- 生活指数列表 -->
    <ul>
      <!-- 遍历格式化后的生活指数数据 -->
      <li 
        v-for="(item, i) in formattedData" 
        :key="i" 
        @click="selectItem(item)"
      >
        <!-- 显示生活指数对应的图标 -->
        <span class="icon">{{ getIcon(item.name) }}</span>
        <!-- 生活指数文本内容 -->
        <div class="text-content">
          <!-- 生活指数名称 -->
          <p>{{ item.name }}</p>
          <!-- 生活指数类别，绑定背景色 -->
          <p :style="{ backgroundColor: item.categoryBg }">{{ item.category }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>


<style scoped>
/* 生活指数容器样式 */
.indice {
  width: 600px;
  background-color: #F7F8F9;
  border-radius: 10px;
  margin-top: 20px;
}
/* 标题样式 */
.indice>h1 {
  text-align: center;
}
/* 列表样式 */
.indice>ul {
  text-align: center;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}
/* 列表项样式 */
.indice>ul>li {
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
}
/* 图标样式 */
.indice>ul>li .icon {
  font-size: 36px;
  margin-right: 10px;
  flex: 0 0 auto;
  width: 2em;
  text-align: center;
}
/* 文本内容样式 */
.indice>ul>li .text-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 文本段落通用样式 */
.indice>ul>li .text-content p {
  margin: 0;
  padding: 0;
  word-break: break-word;
  max-width: 100%;
}
/* 第一个段落样式（生活指数名称） */
.indice>ul>li .text-content p:nth-child(1) {
  font-weight: bold;
}
/* 第二个段落样式（生活指数类别） */
.indice>ul>li .text-content p:nth-child(2) {
  font-size: 14px;
  color:#fff;
}
</style>